<template>
	<view>
		<u-navbar title="累计收益" bgColor="#fff" :autoBack="true" placeholder
			titleStyle="font-size:34rpx;font-weight:500;color:#000000;">
		</u-navbar>
		<view class="box p24 flex-align">
			<view class="flex-1">
				<view class="fw-400 fs-14 lh-2 color-fff">累计收益</view>
				<view class="fw-700 fs-30 color-fff pt-4">{{totalIncome || '0.00'}}<span class="fw-400 fs-14 ps-2">元</span></view>
			</view>
		</view>
		<u-sticky :offset-top="$f.sys().top + 44">
			<view class="nav-box flex-align py-10 px-20 bg-fff">
				<view class="fw-500 fs-13 lh-2 color-000 flex-1">收益明细</view>
				<view class="flex-align" @click="dateShow = true">
					<view class="fw-500 fs-13 lh-2 color-000 pe-4">{{$f.timeFormat(date, 'yyyy月mm日')}}</view>
					<u-icon name="arrow-down" color="#D2D0CE" size="12"></u-icon>
				</view>
			</view>
		</u-sticky>
		<view class="list">
			<view class="item flex px-16 py-16" v-for="(item,index) in list" :key="index">
				<view class="flex-1">
					<view class="flex-align fs-16 fw-700 lh-2 color-000">
						<view class="flex-1">{{item.serviceType || item.title}}</view>
						<view class="fw-600 fs-16 color-333">+￥{{item.amount}}</view>
					</view>
					<view class="flex-align pt-4">
						<view class="fw-400 fs-14 lh-2 color-666 flex-1">{{item.createTime}}</view>
						<view class="fw-400 fs-14 lh-2 color-666 ">已入账</view>
					</view>
				</view>
			</view>
			<block v-if="kong">
				<view style="height: 200rpx;"></view>
				<u-empty mode=" " text="什么都没有，空空如也～" icon="/static/image/data.png" width="123">
				</u-empty>
			</block>
		</view>
		<!-- 日期选择 -->
		<u-datetime-picker :show="dateShow" v-model="date" :maxDate="maxDate" mode="year-month" title="选择日期"
			:isCustomize="true" @cancel="dateShow=false" @confirm="dateConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateShow: '',
				date: '',
				list: [],
				maxDate: '',
				totalIncome: 0,
				kong:false
			}
		},
		onLoad() {
			this.maxDate = Date.now();
			this.date = Date.now();
		},
		onReachBottom() {
			this.getList('lower');
		},
		onShow() {
			this.getList('upper');
			this.getAccountInfo();
		},
		methods: {
			// 获取账户信息
			getAccountInfo() {
				this.$api.get({
					url: '/companion/updateInfo/account-info',
					success: res => {
						this.totalIncome = res.totalIncome;
					}
				});
			},
			//获取商品列表
			getList(type) {
				// 判断上拉还是下拉
				if (type === 'upper') {
					this.current_page = 1;
				} else if (type === 'lower') {
					if (this.current_page >= this.last_page) {
						return console.log('真没有了~~');
					} else {
						this.current_page += 1;
					}
				}
				this.$api.get({
					url: '/companion/order/earnings/list',
					data: {
						page: this.current_page,
						pageSize: 999,
						yearMonth: this.$f.timeFormat(this.date, 'yyyy-mm'),
						type: 1
					},
					loadingTip: '加载中...',
					success: res => {
						console.log('金额列表', res)
						if (type === 'lower') {
							this.list = this.list.concat(res.list);
						} else {
							this.list = res.list;
						}
						if (this.list.length) {
							this.kong = false
						} else {
							this.kong = true
						}
						this.last_page = res.pages; //总页码
					},
					fail: error => {
						console.error('获取失败', error);
					}
				});
			},
			dateConfirm(e) {
				console.log(e)
				this.date = e.value;
				this.dateShow = false;
				this.getList('upper');
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #F65A00;
	}

	.nav-box {
		border-bottom: 1px solid rgba(210, 208, 206, 0.4);

		.line {
			width: 2rpx;
			height: 28rpx;
			background-color: #D2D0CE;
		}
	}

	.item {
		border-bottom: 2rpx dashed #D2D0CE;


		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}
	}
</style>